<template>
  <div class='container'>
    <el-dialog
      title="文章预览"
      :visible='showDialog'
      @close="cancelBtn"
    >
      <h2>{{ dataList.title }}</h2>
      <div class="column">
        <span>{{ dataList.createTime | parseTimeByString }}</span>
        &nbsp;&nbsp;
        <span>超级管理员</span>
        &nbsp;&nbsp;
        <span>
          <i class="el-icon-view"></i>
          {{ dataList.visits }}
        </span>
      </div>
      <div
        class="body"
        v-html="dataList.articleBody"
      >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import { detail } from '@/api/hmmm/articles'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dataList: {}
    }
  },
  methods: {
    // 获取详情的方法
    async getdetail (node) {
      const { data } = await detail(node)
      this.dataList = data
    },

    // 关闭弹层
    cancelBtn () {
      // 关闭弹层
      this.$emit('update')
    }
  }
}
</script>

<style scoped lang='scss'>
// ::v-deep {
.container {
  .column {
    margin-bottom: 10px;
    margin-left: 20px;
  }
  .body {
    border-top: 1px dashed #ccc;
    background-color: #f5f5f5;
    padding: 20px 15px;
    width: 100%;
    ::v-deep {
      img {
        max-width: 100%;
      }
    }
  }
}
// }
</style>
